<!--制浆机-皮带-->
<template>
  <main class="main-container" v-loading="loading">
    <div class="content-container">
      <div style="display: flex">
        <el-text>项目名称：</el-text>
        <div style="margin-left: 10px">
          <el-select
            @change="projectChange"
            class="project-name"
            filterable
            clearable
            style="width: 240px"
            placeholder="请选择要检索的项目"
            v-model="projectId"
          >
            <el-option
              v-for="item in projectOption"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <div
        v-loading="echartsLoading"
        style="
          display: flex;
          justify-content: center;
          position: relative;
          margin-top: 20px;
          flex-grow: 1;
          align-items: center;
        "
      >
        <div style="display: flex; align-items: center; margin-right: 20px">
          <el-progress type="dashboard" :percentage="80" :status="beltStatus">
            <template #default="{ percentage }">
              <span class="percentage-value">{{ percentage }}%</span>
              <span class="percentage-label">Life</span>
            </template>
          </el-progress>
          <div
            style="
              float: right;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 20px;
            "
          >
            <div>
              <span>当前转速：{{ 60 }} rps</span>
            </div>
            <div style="margin-top: 10px">
              <span>当前寿命：{{ currentLife }} day</span>
            </div>
            <div style="margin-top: 10px">
              <span>预警寿命：{{ warningLife }} day</span>
            </div>
            <div style="margin-top: 10px">
              <span>停机寿命：{{ stopLife }} day</span>
            </div>
          </div>
        </div>
        <v-chart style="width: 800px; height: 600px" class="chart" :option="option" />
        <el-card style="width: 400px; height: 600px">
          <template #header> 异常报警信息 </template>
          <span style="color: red">传动带转速波动过大，波动范围 1 rpm</span>
          <br />
          <span style="color: red">传动带转速超限，高于阈值 .6 rpm</span>
          <br />
          <span style="color: red">传动带转速偏低，低于阈值 0.5 rpm</span>
        </el-card>
      </div>
      <!-- <el-card style="margin-top: 20px">
        <template #header>
          <span style="color: red">异常说明</span>
        </template>
        <span>皮带：皮带转速偏低！</span>
        <br />
        <span>皮带：电机电流不稳定！</span>
      </el-card> -->
    </div>
  </main>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MarkLineComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import type { ProjectInfo, PartsInfo } from './types';
import { Project } from '@/components/projects/Project';
import { ElMessage } from 'element-plus';
import VChart from 'vue-echarts'
use([
  CanvasRenderer,
  GridComponent,
  LineChart,
  TooltipComponent,
  MarkLineComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent
])
onMounted(()=>{
  init()
})

const currentLife = ref(300)
const warningLife = ref(300)
const stopLife = ref(365)
const projectOption = ref<ProjectInfo[]>([])
const projectId = ref<string>('')
const loading = ref<boolean>(false)
const echartsLoading = ref<boolean>(false)

const project = new Project();
const data = [
  ['2000-06-05', 116],
  ['2000-06-06', 129],
  ['2000-06-07', 135],
  ['2000-06-08', 86],
  ['2000-06-09', 73],
  ['2000-06-10', 85],
  ['2000-06-11', 73],
  ['2000-06-12', 68],
  ['2000-06-13', 92],
  ['2000-06-14', 130],
  ['2000-06-15', 245],
  ['2000-06-16', 139],
  ['2000-06-17', 115],
  ['2000-06-18', 111],
  ['2000-06-19', 309],
  ['2000-06-20', 206],
  ['2000-06-21', 137],
  ['2000-06-22', 128],
  ['2000-06-23', 85],
  ['2000-06-24', 94],
  ['2000-06-25', 71],
  ['2000-06-26', 106],
  ['2000-06-27', 84],
  ['2000-06-28', 93],
  ['2000-06-29', 85],
  ['2000-06-30', 73],
  ['2000-07-01', 83],
  ['2000-07-02', 125],
  ['2000-07-03', 107],
  ['2000-07-04', 82],
  ['2000-07-05', 44],
  ['2000-07-06', 72],
  ['2000-07-07', 106],
  ['2000-07-08', 107],
  ['2000-07-09', 66],
  ['2000-07-10', 91],
  ['2000-07-11', 92],
  ['2000-07-12', 113],
  ['2000-07-13', 107],
  ['2000-07-14', 131],
  ['2000-07-15', 111],
  ['2000-07-16', 64],
  ['2000-07-17', 69],
  ['2000-07-18', 88],
  ['2000-07-19', 77],
  ['2000-07-20', 83],
  ['2000-07-21', 111],
  ['2000-07-22', 57],
  ['2000-07-23', 55],
  ['2000-07-24', 60]
]
const dateList = data.map(function (item) {
  return item[0]
})
const valueList = data.map(function (item) {
  return item[1]
})

// 初始化请求接口
const init = async () => {
  try {
    loading.value = true;
    const resp = await project.getAsync(0, 1000).finally(()=>{
      loading.value = false;
    })
    projectOption.value = resp
  } catch (error) {
    loading.value = false;
    if (error) return ElMessage.error(error || '获取项目列表错误！');
  }
};

// 监听选择项目
const projectChange = (e) => {
  echartsLoading.value = true
  // 假加载
  setInterval(() => {
    echartsLoading.value = false
  }, 2000);
}

const option = {
  // Make gradient line here
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
      left: 'center',
      text: '转速'
    },
    {
      top: '55%',
      left: 'center',
      text: '电流值'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList,
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '65%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      markLine: {
        silent: true, // 不响应和触发鼠标事件
        data: [
          {
            yAxis: 200, // 设置水平线的y轴位置
            lineStyle: {
              type: 'solid', // 线型，可以是'solid'、'dashed'、'dotted'
              color: 'green', // 线条颜色
              width: 2 // 线条宽度
            }
          }
        ]
      }
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1,
      markLine: {
        silent: true, // 不响应和触发鼠标事件
        data: [
          {
            yAxis: 150, // 设置水平线的y轴位置
            lineStyle: {
              type: 'solid', // 线型，可以是'solid'、'dashed'、'dotted'
              color: 'green', // 线条颜色
              width: 2 // 线条宽度
            }
          }
        ]
      }
    }
  ]
}

const beltStatus = computed(() => {
  if (currentLife.value >= stopLife.value) {
    return 'exception'
  } else if (currentLife.value >= warningLife.value) {
    return 'warning'
  } else {
    return 'success'
  }
})
</script>

<style scoped lang="scss">
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.main-container {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.content-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  display: flex;
  height: 500px;
  justify-content: center;
}
.project-name:focus{
  outline: unset;
}
:deep(.el-select__wrapper:focus){
  outline: unset;
}
</style>
